<template>
  <div>
    <a-alert message="提示" type="info" show-icon style="margin-bottom: 18px">
      <template #description> 为保障您的业务安全，所有设置数据请勿外泄。 </template>
    </a-alert>
    <a-form
      ref="FormRef"
      :model="FormState"
      :rules="FormRule"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-form-item label="开发Key(DevKey)">
        <a-input-group compact>
          <a-tooltip title="双击复制密钥">
            <a-input
              v-model:value="FormState.dev_key"
              readonly
              placeholder="如果为空请先“重置”"
              style="width: calc(100% - 200px)"
              @dblclick="copyText(FormState.dev_key)"
            />
          </a-tooltip>
          <a-button v-permission="{ action: 'reset_dev_key' }" type="danger" @click="doResetDevKey"
            >重置</a-button
          >
        </a-input-group>
      </a-form-item>
      <a-form-item label="通用密钥(SecretKey)">
        <a-tooltip title="无单独设置密钥且需进行签名生成校验的接口使用此密钥(双击复制密钥)">
          <a-input-group compact>
            <a-input
              v-model:value="FormState.secret_key"
              readonly
              placeholder="如果为空请先“重置”"
              style="width: calc(100% - 200px)"
              @dblclick="copyText(FormState.secret_key)"
            />
            <a-button
              v-permission="{ action: 'reset_secret_key' }"
              type="danger"
              @click="doResetSecretKey"
              >重置</a-button
            >
          </a-input-group>
        </a-tooltip>
      </a-form-item>
      <!-- <a-form-item style="margin-left: 12.5%">
        <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
          提交
        </a-button>
      </a-form-item> -->
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, createVNode } from 'vue'
import { Row, Col, InputGroup, Button, Modal } from 'ant-design-vue'
import { UploadOutlined, PaperClipOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getUserSetting, resetDevKey, resetSecretKey } from '@/api/system/user'
import { copyText } from '@/utils/common'

export default defineComponent({
  name: 'SysSetting',
  components: {
    UploadOutlined,
    ExclamationCircleOutlined,
    PaperClipOutlined,
    [Row.name]: Row,
    [InputGroup.name]: InputGroup,
    [Button.name]: Button,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const state = reactive({
      ConfirmLoading: false,
      activeKey: ref('tab1'),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    })
    const FormState = reactive({
      dev_key: '',
      secret_key: ''
    })

    const FormRule = {
      dev_key: [{ required: false, message: '请填写微信登录APPID', trigger: ['blur', 'change'] }],
      wechat_secret: [
        { required: false, message: '请填写微信登录Secret', trigger: ['blur', 'change'] }
      ]
    }
    const FormRule2 = {
      dragon_secret_key: [
        { required: false, message: '请填写密钥Key', trigger: ['blur', 'change'] }
      ],
      dragon_captcha_id: [{ required: false, message: '请填写', trigger: ['blur', 'change'] }]
    }
    onMounted(() => {
      getDataList()
    })

    const tabChange = () => {
      getDataList()
    }

    function getDataList() {
      getUserSetting().then((res) => {
        for (let item in res) {
          FormState[item] = res[item]
        }
      })
    }
    function doResetDevKey() {
      Modal.confirm({
        title: '是否立即重置开发Key(DevKey)?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '重置后原key将立即失效，请谨慎操作',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          resetDevKey().then((res) => {
            if (res.code === 200) {
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function doResetSecretKey() {
      Modal.confirm({
        title: '是否立即重置通用密钥(SecretKey)?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '重置后原key将立即失效，请谨慎操作',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          resetSecretKey().then((res) => {
            if (res.code === 200) {
              getDataList()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    const OnSubmit = () => {
      // FormRef.value
      //   .validate()
      //   .then(() => {
      //   })
      //   .catch(() => {
      //     return false
      //   })
    }
    return {
      ...toRefs(state),
      FormRef,
      FormState,
      FormRule,
      FormRule2,
      doResetDevKey,
      doResetSecretKey,
      tabChange,
      copyText,
      OnSubmit,
      getDataList
    }
  }
})
</script>

<style lang="scss" scoped></style>
